import { Button, Card, Tag, Descriptions } from 'antd';
import { ProCard } from '@ant-design/pro-components';
import React, { useState, useRef, useEffect } from 'react';
import { GridContent } from '@ant-design/pro-layout';
import { useRequest } from 'umi';
import type { RouteChildrenProps } from 'react-router';
import Reportinfo from '../baseinfo/components/Reportinfo';
import Tuitionpay from '../baseinfo/components/Tuitionpay';
import './Center.less';
import { PageContainer } from '@ant-design/pro-layout';
import {
    getusrBaseInfo,
} from '@/services/baseinfo'


const registerandPay: React.FC<RouteChildrenProps> = () => {
    const [userInfo, setUserInfo] = useState(null); // 用于保存接口返回的用户基本信息
    const { data: currentUser, loading } = useRequest(() => {//  获取用户信息
        return queryCurrent();
    });
    useEffect(() => {
        // 在组件加载时调用接口函数
        fetchData();
    }, []);

    const fetchData = async () => {
        try {
            // 调用接口函数并传递必要的参数
            const response = await getusrBaseInfo(null, null);

            // 处理返回的数据
            if (response && response.result) {
                setUserInfo(response.result); // 将接口返回的数据保存到状态中
            }
        } catch (error) {
            console.error('Error fetching user info:', error);
        }
    };
    if (userInfo === null || userInfo === undefined) {
        return <p>Loading...</p>;
    }
    return (
        <PageContainer>
            <GridContent>
                <Card bordered={false} style={{ marginBottom: 24 }} loading={loading} title="个人信息">
                    {/* {!loading && currentUser && ( */}
                            <ProCard className="user-information" >
                                <Descriptions bordered >
                                    <Descriptions.Item label="姓名：" className="bold-and-large">{userInfo.stuName}</Descriptions.Item>
                                    <Descriptions.Item label="学号：" className="bold-and-large">{userInfo.stuCode}</Descriptions.Item>
                                    <Descriptions.Item label="专业班级：" className="bold-and-large">{userInfo.classLabel}</Descriptions.Item>
                                    <Descriptions.Item className="bold-and-large"></Descriptions.Item>
                                </Descriptions>
                            </ProCard>
                    {/* )} */}
                </Card>
                <Card
                    title="报到信息"
                    className='tabsCard'
                    bordered={false}
                >
                    <Reportinfo />
                </Card>
                <Card
                    title="学费缴纳"
                    className='tabsCard'
                    bordered={false}
                >
                    <Tuitionpay />
                </Card>
            </GridContent>
        </PageContainer>
    );
};
export default registerandPay;
